<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable
        ref="proTable"
        title="分站列表"
        highlight-current-row
        :columns="columns"
        :request-api="getSubstationList"
        height="400px"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="CirclePlus" @click="openAddDrawer('新增')">新增分站</el-button>
        </template>
        <!-- 表格操作 -->
        <!-- <template #operation="scope">
          <el-button type="primary" link :icon="Select" @click="selectSubstation(scope.row)"></el-button>
        </template> -->
      </ProTable>
    </div>
    <SubstationAddDrawer ref="drawerSubstationAddRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
// import { ElMessageBox } from "element-plus";
// import { useUserStore } from "@/stores/modules/user";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
// import { Select } from "@element-plus/icons-vue";
import { addSubstation, getSubstationList } from "@/api/modules/substation";
// import { Substation } from "@/api/interface";
import { CirclePlus } from "@element-plus/icons-vue";
import SubstationAddDrawer from "./components/SubstationAddDrawer.vue";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "substationId", label: "分站号", width: 100, sortable: true, search: { el: "input" } },
  { prop: "substationName", label: "分站名称", width: 120, search: { el: "input" } },
  { prop: "substationAddress.province", label: "省", width: 120 },
  { prop: "substationAddress.city", label: "市", width: 120 },
  { prop: "substationAddress.zone", label: "区", width: 120 },
  { prop: "substationAddress.detail", label: "详细地址", width: 240 },
  { prop: "subWarehouseId", label: "分站库房编号", width: 240 },
  { prop: "operation", label: "操作", fixed: "right" }
];

onMounted(() => {});

// 打开 drawer(新增)
const drawerSubstationAddRef = ref<InstanceType<typeof SubstationAddDrawer> | null>(null);
const openAddDrawer = (title: string) => {
  const params = {
    title,
    isView: false,
    api: addSubstation,
    getTableList: proTable.value?.getTableList
  };
  drawerSubstationAddRef.value?.acceptParams(params);
};
</script>
